<template>
  <div class="edituserpanel">
    <div class="edituserpanel_form">
      <div class="edituserpanel_form_head">
        <ItemImgHead :item="item" :isBigHead="isBigHead"></ItemImgHead>
        <router-link
          :to="{
            name: 'EDITHEADER',
            params: { usid: $store.state.user.userId },
          }"
          class="edituserpanel_form_head_editnick"
          >{{ $t("lang.修改头像") }}</router-link
        >
      </div>
      <div class="edituserpanel_form_main">
        <label
          ><i>{{ $t("lang.昵称") }}</i
          ><input
            type="text"
            v-model="nickName"
            :placeholder="this.$t('lang.输入昵称')"
            class="edituserpanel_form_main_input"
        /></label>
        <span class="edituserpanel_form_err" v-show="nickNameIsErr">{{
          nickNameErrMsg
        }}</span>
        <label
          ><i>{{ $t("lang.性别") }}</i
          ><a
            href="javascript:;"
            v-if="sex === ''"
            @click="selectSexClickHandle"
            class="edituserpanel_form_main_selectif"
            >{{ $t("lang.请选择性别") }}</a
          ><a
            href="javascript:;"
            v-else
            @click="selectSexClickHandle"
            class="edituserpanel_form_main_selectelse"
            >{{ sex }}</a
          ></label
        >
        <span class="edituserpanel_form_err" v-show="sexIsErr">{{
          sexErrMsg
        }}</span>
        <label
          ><i>{{ $t("lang.出生日期") }}</i
          ><a
            href="javascript:;"
            v-if="dateTimeString === ''"
            @click="selectDateTimeClickHandle"
            class="edituserpanel_form_main_selectif"
            >{{ $t("lang.请选择出生日期") }}</a
          ><a
            href="javascript:;"
            v-else
            @click="selectDateTimeClickHandle"
            class="edituserpanel_form_main_selectelse"
            >{{ dateTimeString }}</a
          ></label
        >
        <span class="edituserpanel_form_err" v-show="dateTimeIsErr">{{
          dateTimeErrMsg
        }}</span>
        <label
          ><i>{{ $t("lang.个人介绍") }}</i
          ><input
            type="text"
            v-model="myDesc"
            :placeholder="this.$t('lang.输入个人介绍')"
            class="edituserpanel_form_main_input"
        /></label>
        <span class="edituserpanel_form_err" v-show="myDescIsErr">{{
          myDescErrMsg
        }}</span>
        <van-divider>{{ $t("lang.联系方式") }}</van-divider>
        <label
          ><i>{{ $t("lang.网站") }}</i
          ><input
            type="text"
            v-model="mySite"
            :placeholder="this.$t('lang.输入网站地址')"
            class="edituserpanel_form_main_input"
        /></label>
        <span class="edituserpanel_form_err" v-show="mySiteIsErr">{{
          mySiteErrMsg
        }}</span>
        <label
          ><i>{{ $t("lang.邮箱") }}</i
          ><input
            type="text"
            v-model="myEmail"
            :placeholder="this.$t('lang.输入邮箱地址')"
            class="edituserpanel_form_main_input"
        /></label>
        <span class="edituserpanel_form_err" v-show="myEmailIsErr">{{
          myEmailErrMsg
        }}</span>
        <label
          ><i>{{ $t("lang.手机") }}</i
          ><input
            type="text"
            v-model="myTel"
            :placeholder="this.$t('lang.输入手机号码')"
            class="edituserpanel_form_main_input"
        /></label>
        <span class="edituserpanel_form_err" v-show="myTelIsErr">{{
          myTelErrMsg
        }}</span>
        <van-divider>{{ $t("lang.其他") }}</van-divider>
        <div class="edituserpanel_form_main_other">
          <label
            ><i>{{ $t("lang.标签") }}</i>
            <div class="edituserpanel_form_main_other_tags">
              <Tags :items="item.tags" :isClose="isClose"></Tags></div
          ></label>
        </div>
      </div>
      <div class="edituserpanel_form_buttons">
        <BottomTools
          @cancelHandle="cancelClickHandle"
          @enterHandle="saveClickHandle"
          :type="type"
        ></BottomTools>
      </div>
    </div>
    <!--  <div class="edituserpanel_send">
      <a href="javascript:;" class="edituserpanel_send_cancel">{{
        $t("lang.取消")
      }}</a>
      <a href="javascript:;" class="edituserpanel_send_save">{{
        $t("lang.保存")
      }}</a>
    </div> -->
    <van-action-sheet v-model="isShow">
      <van-picker
        show-toolbar
        :title="$t('lang.性别')"
        :columns="columns"
        :default-index="0"
        @confirm="onConfirm"
        @cancel="onCancel"
        :confirm-button-text="$t('lang.确认')"
        :cancel-button-text="$t('lang.取消')"
      />
    </van-action-sheet>
    <van-action-sheet v-model="isDateTimeShow">
      <van-datetime-picker
        v-model="dateTime"
        type="date"
        :title="$t('lang.选择年月日')"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDateTimeConfirm"
        @cancel="onDateTimeCancel"
        :confirm-button-text="$t('lang.确认')"
        :cancel-button-text="$t('lang.取消')"
      />
    </van-action-sheet>
  </div>
</template>
<script>
import { Divider } from "vant";
export default {
  name: "EditUserPanel",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName:"itemImgHead" */ "../../components/common/itemImgHead.vue"
      ),
    BottomTools: () =>
      import(
        /* webpackChunkName:"bottomTools" */ "../../components/common/bottomTools.vue"
      ),
    Tags: () =>
      import(/* webpackChunkName:"tags" */ "../../components/common/tags.vue"),
  },
  data() {
    return {
      type: 2,
      isClose: true,
      nickName: "",
      nickNameIsErr: false,
      nickNameErrMsg: "",
      myDesc: "",
      myDescIsErr: false,
      myDescErrMsg: "",
      mySite: "",
      mySiteIsErr: false,
      mySiteErrMsg: "",
      myEmail: "",
      myEmailIsErr: false,
      myEmailErrMsg: "",
      myTel: "",
      myTelIsErr: false,
      myTelErrMsg: "",
      sex: "",
      sexIsErr: false,
      sexErrMsg: "",
      columns: [this.$t("lang.男"), this.$t("lang.女"), this.$t("lang.保密")],
      isBigHead: true,
      isShow: false,
      dateTime: new Date(),
      dateTimeString: "",
      dateTimeIsErr: false,
      dateTimeErrMsg: "",
      minDate: new Date(1960, 0, 1),
      maxDate: new Date(),
      isDateTimeShow: false,
    };
  },
  methods: {
    cancelClickHandle() {
      this.$router.go(-1);
    },
    saveClickHandle() {},
    selectSexClickHandle() {
      this.isShow = true;
    },
    onConfirm(v, i) {
      this.sex = v;
      this.isShow = false;
    },
    onCancel() {
      this.isShow = false;
    },
    selectDateTimeClickHandle() {
      this.isDateTimeShow = true;
    },
    onDateTimeConfirm(v, i) {
      this.dateTimeString = this.formatDate(v, "yyyy-MM-dd");
      this.isDateTimeShow = false;
    },
    onDateTimeCancel() {
      this.isDateTimeShow = false;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.edituserpanel {
  .edituserpanel_form {
    margin: 10 / @base;
    padding: 10 / @base 0;
    .edituserpanel_form_head {
      margin: 30 / @base 0;
      a {
        &.edituserpanel_form_head_editnick {
          font-size: 12 / @base;
          display: block;
          padding: 10 / @base 0;
        }
      }
    }
    .edituserpanel_form_main {
      min-height: 300 / @base;
      label {
        display: block;
        text-align: left;
        padding: 10 / @base 0;
        i {
          display: block;
          width: auto;
          font-style: normal;
          margin: 0 5 / @base 0 0;
          line-height: 30 / @base;
          display: block;
        }
        input {
          &.edituserpanel_form_main_input {
            width: 330 / @base;
            border: 1 / @base #efefef solid;
            padding: 5 / @base 10 / @base;
            line-height: 30 / @base;
            border-radius: 5 / @base;
          }
        }
        a {
          &.edituserpanel_form_main_selectif {
            display: block;
            width: 80%;
            line-height: 30 / @base;
            color: #ccc;
          }
          &.edituserpanel_form_main_selectelse {
            display: block;
            width: 80%;
            line-height: 30 / @base;
          }
        }
        .edituserpanel_form_main_other_tags {
          width: 345 / @base;
        }
      }
    }
    .edituserpanel_form_buttons {
      margin: 30 / @base 0 0;
    }
  }
}
</style>
